|
1 | 1 | ---
|
2 | 2 | title: DOMParser
|
3 | 3 | slug: Web/API/DOMParser
|
| 4 | +l10n: |
| 5 | + sourceCommit: 3e1b5277c6451e7d27ab628f23fb9702947a7a7b |
4 | 6 | ---
|
5 | 7 |
|
6 |
| -{{APIRef("DOM")}}{{SeeCompatTable}} |
| 8 | +{{APIRef("DOM")}} |
7 | 9 |
|
8 |
| -`DOMParser` 可以將XML或是HTML格式的字串轉成 DOM [文件](/zh-TW/docs/Web/API/Document)。`DOMParser`的規格請參閱 [DOM 解譯與串流化](https://w3c.github.io/DOM-Parsing/)。 |
| 10 | +**`DOMParser`** 介面提供了從字串中解析 {{Glossary("XML")}} 或 {{Glossary("HTML")}} 原始碼成 DOM {{domxref("Document")}} 的能力。 |
9 | 11 |
|
10 |
| -請注意[XMLHttpRequest](/zh-TW/docs/Web/API/XMLHttpRequest)解譯的是 URL 連結內容裡的 XML 與 HTML 文件。 |
| 12 | +若要執行相反的操作,也就是將 DOM 樹轉換成 XML 或 HTML 原始碼,可以使用 {{domxref("XMLSerializer")}} 介面。 |
11 | 13 |
|
12 |
| -## 產生一個 DOMParser |
| 14 | +若是 HTML 文件,也可以透過設定 {{domxref("Element.innerHTML")}} 和 {{domxref("Element.outerHTML", "outerHTML")}} 屬性的值,將 DOM 的部分內容替換為由 HTML 建立的新 DOM 樹。這些屬性也能被讀取,以擷取與對應 DOM 子樹相對應的 HTML 片段。 |
13 | 15 |
|
14 |
| -「`new DOMParser()`」可產生 DOMParser。 |
| 16 | +請注意,{{domxref("XMLHttpRequest")}} 可以直接從可透過 URL 存取的資源解析 XML 與 HTML,並在其 {{domxref("XMLHttpRequest.response", "response")}} 屬性中回傳一個 `Document`。 |
15 | 17 |
|
16 |
| -關於如何在 Firefox 外掛程式中產生 DOMParser,請參考 `nsIDOMParser` 文件 |
| 18 | +> [!NOTE] |
| 19 | +> 請注意,像是 `<p>` 這樣的[區塊級元素](/zh-TW/docs/Glossary/Block-level_content),如果另一個區塊級元素嵌套在內部並在關閉 `<p>` 標籤之前被解析,則會自動關閉。 |
17 | 20 |
|
18 |
| -## 解譯 XML |
| 21 | +## 建構子 |
19 | 22 |
|
20 |
| -產生解譯物件後,請呼叫`parseFromString方法函式來將XML字串轉換成DOM物件`: |
| 23 | +- {{domxref("DOMParser.DOMParser","DOMParser()")}} |
| 24 | + - : 建立一個新的 `DOMParser` 物件。 |
21 | 25 |
|
22 |
| -```js |
23 |
| -var parser = new DOMParser(); |
24 |
| -var doc = parser.parseFromString(stringContainingXMLSource, "application/xml"); |
25 |
| -``` |
| 26 | +## 實例方法 |
26 | 27 |
|
27 |
| -### 錯誤處理 |
| 28 | +- {{domxref("DOMParser.parseFromString()")}} |
| 29 | + - : 使用 HTML 或 XML 解析器解析字串,並回傳一個 {{domxref("HTMLDocument")}} 或 {{domxref("XMLDocument")}}。 |
28 | 30 |
|
29 |
| -請注意如果解譯過程出錯,目前的 `DOMParser` 不會丟出異常物件(exception),但是會回傳一個錯誤文件(請看 [Firefox bug 45566](https://bugzil.la/45566)): |
| 31 | +## 範例 |
30 | 32 |
|
31 |
| -```xml |
32 |
| -<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> |
33 |
| -(error description) |
34 |
| -<sourcetext>(a snippet of the source XML)</sourcetext> |
35 |
| -</parsererror> |
36 |
| -``` |
| 33 | +這個介面唯一的方法 {{domxref("DOMParser.parseFromString()")}} 的文件中,包含了用於解析 XML、SVG 和 HTML 字串的範例。 |
37 | 34 |
|
38 |
| -解譯錯誤也會記錄在錯誤終端機中([Error Console](/zh-TW/docs/Error_Console)), 紀錄裡頭的文件 URI (如下) 則為錯誤來源. |
| 35 | +## 規範 |
39 | 36 |
|
40 |
| -## 解譯 SVG 或 HTML 文件 |
41 |
| - |
42 |
| -`DOMParser` 也可以用來解譯 SVG 文件或是 HTML 文件。可以依 MIME 格式,輸出三種不同格式. 如果 MIME 格式是 `text/xml`,輸出的格式為 `XMLDocument`, 如果 MIME 格式是 `image/svg+xml`, 輸出格式為 `SVGDocument,` 如果 MIME 格式是 `text/html`, 輸出格式則為 `HTMLDocument`. |
43 |
| - |
44 |
| -```js |
45 |
| -var parser = new DOMParser(); |
46 |
| -var doc = parser.parseFromString(stringContainingXMLSource, "application/xml"); |
47 |
| -// returns a Document, but not a SVGDocument nor a HTMLDocument |
48 |
| - |
49 |
| -parser = new DOMParser(); |
50 |
| -doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml"); |
51 |
| -// returns a SVGDocument, which also is a Document. |
52 |
| - |
53 |
| -parser = new DOMParser(); |
54 |
| -doc = parser.parseFromString(stringContainingHTMLSource, "text/html"); |
55 |
| -// returns a HTMLDocument, which also is a Document. |
56 |
| -``` |
57 |
| - |
58 |
| -### 其他瀏覽器可用的 DOMParser HTML 外掛程式 |
59 |
| - |
60 |
| -```js |
61 |
| -/* |
62 |
| - * DOMParser HTML extension |
63 |
| - * 2012-09-04 |
64 |
| - * |
65 |
| - * By Eli Grey, http://eligrey.com |
66 |
| - * Public domain. |
67 |
| - * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. |
68 |
| - */ |
69 |
| - |
70 |
| -/*! @source https://gist.github.com/1129031 */ |
71 |
| -/*global document, DOMParser*/ |
72 |
| - |
73 |
| -(function (DOMParser) { |
74 |
| - "use strict"; |
75 |
| - |
76 |
| - var proto = DOMParser.prototype, |
77 |
| - nativeParse = proto.parseFromString; |
78 |
| - // Firefox/Opera/IE throw errors on unsupported types |
79 |
| - try { |
80 |
| - // WebKit returns null on unsupported types |
81 |
| - if (new DOMParser().parseFromString("", "text/html")) { |
82 |
| - // text/html parsing is natively supported |
83 |
| - return; |
84 |
| - } |
85 |
| - } catch (ex) {} |
86 |
| - |
87 |
| - proto.parseFromString = function (markup, type) { |
88 |
| - if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { |
89 |
| - var doc = document.implementation.createHTMLDocument(""); |
90 |
| - if (markup.toLowerCase().indexOf("<!doctype") > -1) { |
91 |
| - doc.documentElement.innerHTML = markup; |
92 |
| - } else { |
93 |
| - doc.body.innerHTML = markup; |
94 |
| - } |
95 |
| - return doc; |
96 |
| - } else { |
97 |
| - return nativeParse.apply(this, arguments); |
98 |
| - } |
99 |
| - }; |
100 |
| -})(DOMParser); |
101 |
| -``` |
102 |
| - |
103 |
| -### DOMParser from Chrome/JSM/XPCOM/Privileged Scope |
104 |
| - |
105 |
| -See article here: [nsIDOMParser](/zh-TW/docs/nsIDOMParser) |
| 37 | +{{Specifications}} |
106 | 38 |
|
107 | 39 | ## 瀏覽器相容性
|
108 | 40 |
|
109 | 41 | {{Compat}}
|
110 | 42 |
|
111 |
| -## 參考資料 |
| 43 | +## 參見 |
112 | 44 |
|
113 |
| -- [Parsing and serializing XML](/zh-TW/docs/Web/XML/Parsing_and_serializing_XML) |
114 |
| -- [XMLHttpRequest](/zh-TW/docs/Web/API/XMLHttpRequest) |
115 |
| -- [XMLSerializer](/zh-TW/docs/Web/API/XMLSerializer) |
116 |
| -- [Parsing HTML to DOM](/zh-TW/docs/Mozilla/Add-ons/Code_snippets/HTML_to_DOM) |
| 45 | +- [解析與序列化 XML](/zh-TW/docs/Web/XML/Guides/Parsing_and_serializing_XML) |
| 46 | +- {{domxref("XMLHttpRequest")}} |
| 47 | +- {{domxref("XMLSerializer")}} |
| 48 | +- {{jsxref("JSON.parse()")}}——用於 {{jsxref("JSON")}} 文件的對應方法。 |
0 commit comments